<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :width="width"
      @ok="handleOk"
      @cancel="handleCancel">
      <a-spin :spinning="spinning">
        <a-form :form="form">
          <dynamic-forms ref="dynamicForms" :form="form" @submit="submit"></dynamic-forms>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
  import DynamicForms from './DynamicForms.vue'
  export default {
    components: {
      DynamicForms
    },
    props: {
      width: {
        type: String,
        default: '70%',
        required: true
      },
      title: {
        type: String,
        default: '表单管理',
        required: true
      }
    },
    data () {
      return {
        form: this.$form.createForm(this),
        visible: false,
        spinning: false,
        confirmLoading: false
      }
    },
    created () {
    },
    methods: {
      initForm (models) {
        const _this = this
        this.spinning = true
        this.openModal()
         if (models) {
            setTimeout(() => {
               _this.$refs.dynamicForms.setFields(models)
            }, 300)
         }
         setTimeout(() => {
            _this.spinning = false
         }, 300)
      },
      openModal () {
         this.visible = true
      },
      submit (data) {
         this.$emit('submit', data)
      },
      handleOk (e) {
          this.$refs.dynamicForms.submitFrom()
      },
      handleCancel (e) {
        const _this = this
        this.$emit('beforeClose')
        setTimeout(() => {
           _this.visible = false
        }, 150)
        this.$emit('close')
      },
      cleanForm () {
         this.$refs.dynamicForms.resetFieldsClear(true)
      }

    }
  }
</script>
<style>
</style>
